Hostile Patterns in Error Messages敵意模式在錯誤資訊中的表現

過早的錯誤提示、過於激進的欄位樣式，以及不必要幹擾的系統狀態訊息，會讓使用者感到不適，加重使用者在簡單任務中的認知負擔。錯誤設計不僅讓使用者感到挫敗，還可能影響任務完成的效率和使用者體驗。

兩條主要可用性原則（Usability Heuristics）與錯誤相關：

錯誤預防（Error Prevention）：避免容易出錯的條件，或在執行可能產生嚴重後果的操作前提供確認選項。

幫助使用者識別、診斷和糾正錯誤（Help Users Recognize, Diagnose, and Recover from Errors）：錯誤訊息應以通俗語言表述，清楚地說明問題及解決方法，並透過合適的視覺設計引起使用者注意。

避免過於激進的錯誤預防與恢復設計，可遵循以下兩條原則：

1 避免過早的錯誤提示（Avoid Premature Error Messages）：過早的錯誤提示是指在使用者尚未完成某項操作、甚至沒有實際犯錯時，系統就提前顯示錯誤資訊。

改進建議：

錯誤提示應在使用者完成欄位輸入後或嘗試提交時才顯示。

提供必要的格式限制說明，例如透過佔位符（placeholder）或註釋方式展示，而非即時錯誤提示。

減少多餘和重複的提示，僅用星號標記必填欄位即可。

LG結賬過程中的郵編輸入錯誤：使用者輸入郵編欄位時，錯誤資訊在使用者開始輸入數字時就顯示，直到輸入滿5個字元才消失。這種未犯錯即提示的設計令人困惑和不必要。

Labcorp支付門戶中的電子郵件地址輸入：使用者剛輸入第一個字元時，立刻彈出“無效電子郵件地址”的錯誤資訊。

Sorel的出生日期輸入：使用者尚未完成日期輸入，系統即提示“請輸入有效日期”。

希爾頓酒店預訂表單中姓氏欄位：使用者點選姓氏欄位後，系統立刻用紅色標出並顯示錯誤資訊“請輸入姓氏”。這種提示只應在使用者跳過該欄位並嘗試提交表單時才顯示。

Xpress-pay支付門戶中金額欄位：使用者尚未與欄位互動時，錯誤提示“金額不能為空”已出現，還伴隨多個冗餘指標（紅色邊框、感嘆號圖示等）。

2 僅將錯誤樣式用於真正的錯誤（Reserve Error Styling for Errors Only）

錯誤樣式（如紅色字型、警告圖示等）應用於非錯誤資訊，會讓使用者誤以為他們犯了錯誤，從而打斷他們的任務流程。

改進建議

將錯誤樣式留給真正需要打斷使用者工作流的關鍵錯誤資訊。

非錯誤資訊可採用柔和的視覺設計，例如灰色背景、資訊圖示，而非紅色字型或警告圖示。

HR系統中的無附件資訊：“沒有附件可顯示”的普通狀態資訊被設計成黃色背景加警告圖示，顯得比實際重要。

亞馬遜 Glow 的移動應用程式使用一個黃色警示圖示來表示通話失敗。

Thrift Books結賬中的地址確認資訊：系統在使用者點選位址列位時，用紅色字型和警告圖示顯示“請確保地址正確，提交訂單後不可更改”，讓使用者誤以為存在錯誤。

PayPal應用的非錯誤資訊展示：PayPal在移動應用中將類似資訊以灰色背景和資訊圖示（圓圈內小寫i）展示，避免引起錯誤的視覺混淆。

過於激進的錯誤預防和恢復設計猶如在使用者肩膀上喊“你錯了！”，這既無益又令人生厭。設計時應當注重幫助使用者，而非責備使用者。

設計指導原則：

在使用者完成欄位輸入或移動到下一個欄位後才顯示相關錯誤提示。

預先提供輸入限制說明，避免讓使用者邊試探邊糾正錯誤。

僅用星號或簡單標註標記必填欄位，減少冗餘提示資訊。